<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     body {
        background-color: blueviolet;
    
     }

     .box {
          width: 200px;   
          height: 100px;
          display: flex;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        /* 圆球 */
    span {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: coral;
        margin: 5px;
        animation: move 1s linear infinite;
    }

    .two {
        /* 其他两个延时一会 */
        animation: move 1s 0.5s  linear infinite;

    }

    .three {
        animation: move 1s 0.8s linear infinite;


    }

    @keyframes move{
        /* 通过Y轴位移和透明度实现 */
        0%{
            transform: translateY(0px);
            opacity: 1;

        }
        50%{
            transform: translateY(-30px);
            opacity: 0.1;
         
        }
        100%{
            transform: translateY(0px);
            opacity: 1;
           
        }
    }


   </style>

</head>
<body>
    
    <div class="box">
    <span  class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
</div>
</body>
</html>